<template>
	<div>
		<el-container>
			<!-- 顶部 -->
			<el-header class="header">
				<!-- <navbar /> -->
				
			</el-header>
			<!-- 左侧边栏 -->
			<el-container>
				<el-aside
					style="width: 160px; height: calc(100vh)"
					class="aside-menu scroll"
				>
				</el-aside>
				<!-- 主体 -->
				<el-main class="main">
					<!-- <div class="bjimg"></div> -->
					<el-dropdown class="eltop" trigger="click" placement="bottom-start">
						<span class="el-dropdown-link" id="span1">
							城市<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown" style="margin-left: 130px">
							<el-dropdown-item>北京</el-dropdown-item>
							<el-dropdown-item>深圳</el-dropdown-item>
							<el-dropdown-item>南京</el-dropdown-item>
							<el-dropdown-item disabled>上海</el-dropdown-item>
							<el-dropdown-item>江苏</el-dropdown-item>
							<el-dropdown-item>成都</el-dropdown-item>
							<el-dropdown-item>杭州</el-dropdown-item>
							<el-dropdown-item>天津</el-dropdown-item>
							<el-dropdown-item>西安</el-dropdown-item>
							<el-dropdown-item>福建</el-dropdown-item>
							<el-dropdown-item>济南</el-dropdown-item>
							<el-dropdown-item>厦门</el-dropdown-item>
							<el-dropdown-item>江西</el-dropdown-item>
						</el-dropdown-menu>
						<span class="span2">经销商</span>
					</el-dropdown>
					<div style="overflow: auto; white-space: nowrap">
						<div class="elbottom">
							<div class="big">
								<div class="done">共找到<span>66</span>条结果</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
								<div class="dtwo">
									<h3>比亚迪汽车王朝网（盛世开元福田城市展厅）</h3>
									<div>
										<i
											class="el-icon-location-outline"
											style="margin: 15px 5px 15px 0px"
										></i
										>广东省深圳市福田区福华三路100号鼎和大厦1层08单元
									</div>
									<div>
										<i class="el-icon-phone" style="margin-right: 5px"></i>电话:
										0755-83237229
									</div>
								</div>
							</div>
						</div>

						<!-- 显示地图 -->
						<div
							id="container"
							style="
								margin-bottom: 60px;
								margin-left: 30px;
								width: 45%;
								height: 700px;
								border: 1px solid black;
								display: inline-block;
							"
						></div>
					</div>
				</el-main>
			</el-container>
			
		</el-container>
	</div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"
import Navbar from "../components/Navbar.vue"

export default {
	components: { Navbar },
	mounted() {
		AMapLoader.load({
			key: "bf8b199d626a29b66f06d17f72cb465f", // 申请好的Web端开发者Key，首次调用 load 时必填
			version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
		})
			.then((AMap) => {
				map = new AMap.Map("container")
			})
			.catch((e) => {
				console.log(e)
			})
	},
}
</script>

<style lang="scss" scoped></style>

<style>
.el-dropdown-link {
	cursor: pointer;
	color: #000;
	font-size: 20px;
}

.el-icon-arrow-down {
	font-size: 20px;
}

.eltop {
	width: 663px;
	height: 99px;
	background: #ffffff;
	box-shadow: 0px 1px 22px 2px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	margin-top: 70px;
	margin-left: 30px;
	justify-content: space-between;
}
.main {
	height: 1000px;
}

#span1 {
	line-height: 99px;
	margin-left: 20%;
	margin-right: 40%;
}

.span2 {
	color: #000;
	font-size: 20px;
}

.elbottom {
	width: 663px;
	height: 750px;
	background: #ffffff;
	box-shadow: 0px 1px 22px 2px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	margin-top: 30px;
	margin-left: 30px;
	color: #000;
	overflow: visible;
	overflow: auto;
	display: inline-block;
}

.big {
	width: 583px;
	padding-left: 40px;
	padding-top: 25px;
}

.done {
	font-size: 25px;
	padding-bottom: 20px;
}
.big > .done > span {
	font-size: 35px;
	color: red;
}

.dtwo {
	padding-bottom: 20px;
	padding-top: 20px;
	border-bottom: 2px solid #c0c4cc;
}

.elbottom::-webkit-scrollbar {
	/* 滚动条整体样式 */
	width: 4px; /* 高宽分别对应横竖滚动条的尺寸 */
	height: 8px;
}

.elbottom::-webkit-scrollbar-thumb {
	/* 滚动条内滑块的样式 */
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.11);
	background: #ccced2;
}

.elbottom::-webkit-scrollbar-track {
	/* 滚动条里面轨道的样式 */
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
	border-radius: 0;
	background: #ffffff;
}

.footer {
	width: 100%;
	font-size: 12px;
	color: #ffffff;
	opacity: 0.8;
	background-color: black;
	text-align: center;
	padding-top: 20px;
}
</style>
